<template>
  <div class="ranking">
    <!-- 贡献榜 -->
    <div
      class="bottom-ranking"
      style="margin-bottom: 20px"
      v-if="contributeUser.length > 0"
    >
      <div class="head-title">
        <font>贡献榜</font>
        <div class="head-tabs">
          <div class="tab active">本月排行</div>
          <div class="tab">总榜</div>
        </div>
      </div>
      <div class="ranking-content">
        <ul>
          <li v-for="(user, index) in contributeUser" :key="user.id">
            <div class="icon">
              <img src="@/assets/one.svg" alt="" v-if="index == 0" />
              <img src="@/assets/two.svg" alt="" v-if="index == 1" />
              <img src="@/assets/three.svg" alt="" v-if="index == 2" />
              <img src="@/assets/other.svg" alt="" v-if="index > 2" />
            </div>
            <div class="avatar">
              <el-popover
                :width="300"
                popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
              >
                <template #reference>
                  <el-avatar :src="user.createUserAvatar" />
                </template>
                <template #default>
                  <div
                    class="demo-rich-conent"
                    style="display: flex; gap: 16px; flex-direction: column"
                  >
                    <el-avatar
                      :size="60"
                      :src="user.createUserAvatar"
                      style="margin-bottom: 8px"
                    />
                    <div>
                      <p
                        class="demo-rich-content__name"
                        style="margin: 0; font-weight: 500"
                      >
                        {{ user.createUser }}
                      </p>
                      <p
                        class="demo-rich-content__mention"
                        style="
                          margin: 0;
                          font-size: 14px;
                          color: var(--el-color-info);
                        "
                      >
                        {{ user.email }}
                      </p>
                    </div>

                    <p class="demo-rich-content__desc" style="margin: 0">
                      {{ user.introduce }}
                    </p>
                  </div>
                </template>
              </el-popover>
              <span style="margin-left: 7px">
                {{ user.createUser }}
              </span>
            </div>
            <div class="hot">
              <img src="@/assets/hot.svg" alt="" />
              <span>
                {{ user.subjectCount }}
              </span>
            </div>
          </li>
        </ul>
      </div>
      <div class="ranking-btn">
        <el-button
          type="primary"
          round
          style="width: 80%"
          icon="Promotion"
          @click="toUploadSubject"
          >去贡献</el-button
        >
      </div>
    </div>
    <!-- 练习榜 -->
    <div class="top-ranking">
      <div class="head-title">
        <font>练习榜</font>
        <div class="head-tabs">
          <div class="tab active">本月排行</div>
          <div class="tab">总榜</div>
        </div>
      </div>
      <div class="ranking-content">
        <ul>
          <li v-for="(item, index) in 5" :key="index">
            <div class="icon">
              <img src="@/assets/one.svg" alt="" v-if="index == 0" />
              <img src="@/assets/two.svg" alt="" v-if="index == 1" />
              <img src="@/assets/three.svg" alt="" v-if="index == 2" />
              <img src="@/assets/other.svg" alt="" v-if="index > 2" />
            </div>
            <div class="avatar">
              <el-avatar
                src="https://img.1000n.com/uploads/wenzhangimg/202208/8f3e943f72b62770.jpg"
              />
              <span style="margin-left: 7px">Admin</span>
            </div>
            <div class="hot">
              <img src="@/assets/hot.svg" alt="" />
              <span>160</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="ranking-btn">
        <el-button
          type="primary"
          round
          style="width: 80%"
          icon="Promotion"
          @click="toRelation"
          >去练习</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import permissionCheck from "@/utils/permissionCheck";
import { ElMessage } from "element-plus";
import { reqContributeList } from "@/api/subject/subject";
import { ref } from "vue";

const $router = useRouter();

// 贡献榜用户数据
const contributeUser = ref({});

// 初始化练习榜和贡献榜
const initRank = () => {
  // 获取贡献榜的数据
  reqContributeList().then((res) => {
    if (res.code == 200) {
      contributeUser.value = res.data;
    }
  });
};

// 去练习
const toRelation = () => {
  // const permissionStatus = permissionCheck("subject");
  ElMessage.info("模块开发中");
};

// 去出题
const toUploadSubject = () => {
  const permissionStatus = permissionCheck(["subject:add", "subject:upadte"]);
  console.log(permissionStatus)
  if (permissionStatus) {
    $router.push("/upload-subject");
  } else {
    ElMessage.info("暂无录题权限");
  }
};

initRank();
</script>

<style scoped lang="scss">
.ranking {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .top-ranking,
  .bottom-ranking {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.123);
    background-color: #fff;
    padding: 15px;
    box-sizing: border-box;
    .head-title {
      width: 100%;
      height: 35px;
      border-bottom: 1px solid #e3e3e3;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      .head-tabs {
        font-size: 12px;
        display: flex;
        height: 100%;
        .tab {
          margin: 0 5px;
          cursor: pointer;
          height: 100%;
          display: flex;
          align-items: center;
        }
        .tab.active {
          font-weight: bold;
          border-bottom: 1px solid rgb(39, 39, 239);
        }
      }
    }
    .ranking-content {
      width: 100%;
      ul {
        width: 100%;
        display: flex;
        flex-direction: column;
        li {
          width: 100%;
          height: 50px;
          display: flex;
          align-items: center;
          cursor: pointer;
          transition: all 0.2s;
          font-size: 12px;
          font-family: "微软雅黑";
          font-weight: 550;
          .icon {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 10px;
            img {
              width: 30px;
            }
          }
          .avatar {
            height: 100%;
            display: flex;
            align-items: center;
          }
          .hot {
            font-size: 13px;
            display: flex;
            align-items: center;
            justify-content: end;
            flex: 1;
            img {
              width: 30px;
              margin-right: 3px;
            }
          }
        }
        li:hover {
          background-color: #e3e3e31f;
        }
      }
    }
    .ranking-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 10px;
    }
  }
}
</style>